import React from 'react'
import { useNavigate } from 'react-router-dom'
import './guan.css'
export default function Guan() {
  const navigate = useNavigate();
  const lists =[{id:1,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:2,text:'3月20日晚上7点半，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:3,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:4,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:5,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:6,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:7,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:8,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:9,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  ]
  return (
    <div>
      <div className='gu-tou'>
        <div className='gu-zhu'>
          <span className='gu-zi' onClick={()=>{navigate('/app/my/dong')}}>{'<'}</span>
          <span style={{fontSize:'15px'}} >我的关注</span>
        </div>
        <input type='text' placeholder='搜索关键词'></input>
      </div>
      <div className='gu-main'>
        {
          lists.map(item=>{
            return <div className='gu-nei'>
              <div className='gu-tu'><img src={item.tou}></img></div>
              <div className='gu-name'>{item.name}</div>
              <div><img src={require('./img/关注.png')}></img></div>
            </div>
          })
        }
      </div>
    </div>
  )
}
